<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title>
            {{translate("APP_NAME")}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">{{translate("APP_NAME")}}</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-grid>
        <ion-row>
            <ion-col size="6" class="ion-no-padding">
                <ion-card class="card" (click)="connectDevice()">
                    <ion-text class="title">
                        <ion-icon name="bluetooth" [color]="connectedDevice.id ? 'primary' : ''"></ion-icon>
                    </ion-text>
                    <br><br>
                    <ion-text class="title">
                        {{translate("CONNECT_DEVICE")}}
                    </ion-text>
                </ion-card>
            </ion-col>
            <ion-col size="6" class="ion-no-padding">
                <ion-card class="card" (click)="addTemplate()">
                    <ion-text class="title">
                        <ion-icon name="add-circle"></ion-icon>
                    </ion-text>
                    <br><br>
                    <ion-text class="title">
                        {{translate("ADD_TEMPLATE")}}
                    </ion-text>
                </ion-card>
            </ion-col>
            <ion-col size="12" class="ion-no-padding">
                <ion-card class="card" (click)="feedback()">
                    <ion-text class="title">
                        <ion-icon name="information-circle"></ion-icon>
                    </ion-text>
                    <br><br>
                    <ion-text class="title">
                        {{translate("FEEDBACK")}}
                    </ion-text>
                    <br>
                    <ion-text>
                        {{translate("FEEDBACK_SUB")}}
                    </ion-text>

                </ion-card>
            </ion-col>
            <ion-col size="6" class="ion-no-padding">
                <ion-card class="card" (click)="settings()">
                    <ion-text class="title">
                        <ion-icon name="information-circle"></ion-icon>
                    </ion-text>
                    <br><br>
                    <ion-text class="title">
                        {{translate("ABOUT")}}
                    </ion-text>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list>
        <ion-item-divider>
            <ion-label>
                {{translate("TEMPLATE_LIST")}}
            </ion-label>
        </ion-item-divider>
        <ion-item-sliding *ngFor="let item of items; let i = index">
            <ion-item button detail (click)="templateDatail(item)">
                {{translate("TEMPLATE_NAME")}}:{{item.name}}
            </ion-item>
            <ion-item-options side="end">
                <ion-item-option color="danger" (click)="removeTemplate(i)">
                    <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>
